<script setup lang="ts">

import avatar from "../assets/default.png";

import {ElMessage, ElMessageBox} from "element-plus";
import {useUserInfoStore} from "../stores/userInfo.js";
import {userInfoService} from "../api/user";
import {useRouter} from "vue-router";

const handleCommand = (command) => {
  if (command === 'logout') {
    ElMessageBox.confirm(
        '你确认要退出吗？',
        '温馨提示',
        {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }
    ).then(
        async () => {
          // clear data in pinia
          userInfoStore.removeUserInfo()
          ElMessage.success("退出成功")
          await router.push('/login')
        }
    )
  } else {
    router.push('/user/' + command)
  }
}
const userInfoStore = useUserInfoStore();
const router = useRouter();

const getUserInfo = () => {
  userInfoService().then(res => {
    if (res.data.username === '模拟用户') {
      router.push('/login');
    } else {
      userInfoStore.setUserInfo(res.data);
    }
  })
}
getUserInfo()
</script>

<template>
  <el-header>
    <div>欢迎：<strong>招办管理员</strong></div>
    <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="userInfoStore.userInfo.avatar?userInfoStore.userInfo.avatar:avatar"/>
                        <el-icon>
                            <CaretBottom/>
                        </el-icon>
                    </span>
      <template #dropdown>
        <el-dropdown-menu>

          <el-dropdown-item command="resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
          <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

  </el-header>
</template>

<style scoped lang="scss">
.el-header {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .el-dropdown__box {
    display: flex;
    align-items: center;

    .el-icon {
      color: #999;
      margin-left: 10px;
    }

    &:active,
    &:focus {
      outline: none;
    }
  }
}
</style>
